<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Axios Example</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.js"></script>
  </head>
  <body>
    <h1>Axios Example</h1>
    <button id="fetchData">Fetch Data</button>
    <div id="data"></div>

    <script>
      document
        .getElementById("fetchData")
        .addEventListener("click", function () {
          axios
            .get("http://localhost:3000/api/users/")
            .then(function (response) {
              // 处理成功响应
              console.log(response.data);

              // 在页面上显示数据
              const dataDiv = document.getElementById("data");
              dataDiv.innerHTML = `<h2>${response.data.title}</h2><p>${response.data.body}</p>`;
            })
            .catch(function (error) {
              // 处理错误响应
              console.error("Error fetching data:", error);
              const dataDiv = document.getElementById("data");
              dataDiv.innerHTML =
                "<p>Error fetching data. Please try again later.</p>";
            });
        });
    </script>
  </body>
</html>
